<template>
	<view class="strategy-three">
		<view class="strategy-header" :class="{'strategy-side': getType(info), 'strategy-trend': !getType(info)}">
			<!-- <view class="strategy-code">{{info.strategyInfo && info.strategyInfo.name}}</view>
			<view class="strategy-time">{{info.deal_time | parseTime}}</view> -->
			<view class="strategy-code">{{info.name}}</view>
			<view class="strategy-time">{{info.date}}-{{info.traderTime}}</view>
		</view>
		<view class="strategy-body">
			<view class="strategy-table">
				<view class="table-thead">
					<view class="table-thead__tr">
						<view class="table-thead__th" :style="{width: '28%'}">品种</view>
						<!-- <view class="table-thead__th" :style="{width: '18%'}">开/平仓</view> -->
						<view class="table-thead__th" :style="{width: '18%'}">类型</view>
						<!-- <view class="table-thead__th" :style="{width: '18%'}">
							<view class="trend-color">跌</view>/<view class="side-color">涨</view>
						</view> -->
						<view class="table-thead__th" :style="{width: '36%'}">价格</view>
						<view class="table-thead__th" :style="{width: '18%'}">数量</view>
					</view>
				</view>
				<view class="table-tbody">
					<view class="table-tbody__tr">
						<view class="table-tbody__th" :style="{width: '28%'}">{{info.instrument}}</view>
						<!-- <view class="table-tbody__th" :style="{width: '18%'}">{{type[info.offset]}}</view> 0 0 买涨
//             * 1 0  买跌
//             * 1 1 平涨
//             * 0 1 平跌-->
						<view class="table-tbody__th" :style="{width: '18%'}" v-if="info.bS==0||info.oC==0">买涨</view>
						<view class="table-tbody__th" :style="{width: '18%'}" v-else-if="info.bS==1||info.oC==0">买跌</view>
						<view class="table-tbody__th" :style="{width: '18%'}" v-else-if="info.bS==1||info.oC==1">卖涨</view>
						<view class="table-tbody__th" :style="{width: '18%'}" v-else="info.bS==0||info.oC==1">卖跌</view>
						<!-- <view class="table-tbody__th" :class="{'side-color': getType(info), 'trend-color': !getType(info)}" :style="{width: '18%'}">{{getType(info)?'涨':'跌'}}</view> -->
						<view class="table-tbody__th" :style="{width: '36%'}">{{info.price}}元</view>
						<view class="table-tbody__th" :style="{width: '18%'}">{{info.lots}}</view>
					</view>
				</view>
			</view>
			<view class="strategy-btn">
				<view class="btn" @click="stra">去交易</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bnnButton from '@/components/bnn-ui/button/index.vue'
	export default {
		components: {bnnButton},
		props: {
			info: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data() {
			const num = Math.ceil(Math.random()*10)
			return {
				bool: num%2,
				type: {
					OPEN: '开仓',
					CLOSE: '平仓',
					CLOSETODAY: '仓',
				}
			}
		},
		methods: {
			getType(info) {
				return (info.type === 'BUY' && info.offset === 'OPEN')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.strategy-three{
		.strategy-header{
			color: #fff;
			height: 60rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: red;
			.strategy-code{
				font-size: 32rpx;
			}
			.strategy-time{
			}
		}
		.strategy-side{background-color: #CB1D14;}
		.strategy-trend{background-color: #03B016;}
		
		.strategy-body{
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			.strategy-table{
				flex: 1;
			}
			.strategy-btn{
				padding-left: 20rpx;
				.btn{
					color: #fff;
					padding: 10rpx;
					font-size: 24rpx;
					border-radius: 12rpx;
					background-color: $theme_color;
				}
			}
		}
		
		.strategy-table{
			.table-thead{
				color: #555;
				width: 100%;
				.table-thead__tr{
					display: flex;
					font-size: 28rpx;
				}
				.table-thead__th{
					// flex: 1;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&:first-child{justify-content: flex-start;}
				}
			}
			.table-tbody{
				width: 100%;
				.table-tbody__tr{
					display: flex;
					font-size: 28rpx;
				}
				.table-tbody__th{
					width: 20%;
					height: 60rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
					vertical-align: middle;
					&:first-child{text-align: left;}
				}
			}
		}
	}
</style>
